<template>
  <template v-if="!showMarkdownEditor">
    <header class="forum-header">
      <div class="header-container">
        <div class="logo">
          <span class="word-icon">📝</span>
          <h1>管理文章</h1>
        </div>

        <nav class="main-nav">
          <router-link to="/Home">首页</router-link>
          <router-link to="/Forum">论坛</router-link>
          <router-link to="/MemorizationSkills">记忆技巧</router-link>
          <router-link to="/LearningResources">学习资源</router-link>
          <router-link to="/ManageArticles">我的文章</router-link>
        </nav>
        <div class="user-controls">
          <button class="theme-toggle" @click="toggleTheme">
            {{ theme === 'light' ? '🌙' : '☀️' }}
          </button>
          <!-- <button class="btn primary" @click="showLogin = true">登录</button>
          <button class="btn outline">注册</button> -->
        </div>
      </div>
    </header>
    <div class="article-manager" :class="theme">


      <div class="content-container">
        <!-- 搜索和筛选区域 -->
        <div class="toolbar">
          <div class="search-box">
            <svg viewBox="0 0 24 24" width="18" height="18">
              <path fill="currentColor"
                d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
            </svg>
            <input type="text" placeholder="搜索文章..." v-model="searchQuery" @input="searchArticles">
          </div>

          <div class="filters">
            <select v-model="filterStatus" @change="filterArticles">
              <option value="all">全部状态</option>
              <option value="published">已发布</option>
              <option value="draft">草稿</option>
              <option value="archived">已归档</option>
            </select>

            <select v-model="filterCategory" @change="filterArticles">
              <option value="all">全部分类</option>
              <option v-for="category in categories" :value="category.id" :key="category.id">
                {{ category.name }}
              </option>
            </select>
          </div>
        </div>

        <!-- 文章列表 -->
        <div class="article-list">
          <div class="list-header">
            <div class="header-item" style="flex: 3;">标题</div>
            <div class="header-item" style="flex: 1;">分类</div>
            <div class="header-item" style="flex: 1;">状态</div>
            <div class="header-item" style="flex: 1;">阅读量</div>
            <div class="header-item" style="flex: 1;">发布日期</div>
            <div class="header-item" style="flex: 1;">操作</div>
          </div>

          <div v-for="article in filteredArticles" :key="article.id" class="article-item">
            <div class="item-cell" style="flex: 3;">
              <div class="article-title">
                <router-link :to="`/article/${article.id}`" class="title-link">
                  {{ article.title }}
                </router-link>
              </div>
            </div>
            <div class="item-cell" style="flex: 1;">
              <span class="category-tag" :style="{ backgroundColor: getCategoryColor(article.category) }">
                {{ getCategoryName(article.category) }}
              </span>
            </div>
            <div class="item-cell" style="flex: 1;">
              <span class="status-badge" :class="article.status">
                {{ getStatusText(article.status) }}
              </span>
            </div>
            <div class="item-cell" style="flex: 1;">
              {{ article.views }}
            </div>
            <div class="item-cell" style="flex: 1;">
              {{ formatDate(article.publishDate) }}
            </div>
            <div class="item-cell actions" style="flex: 1;">
              <button class="action-button edit" @click="openEditModal(article)">
                <svg viewBox="0 0 24 24" width="16" height="16">
                  <path fill="currentColor"
                    d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" />
                </svg>
              </button>
              <button class="action-button delete" @click="confirmDelete(article)">
                <svg viewBox="0 0 24 24" width="16" height="16">
                  <path fill="currentColor"
                    d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
                </svg>
              </button>
              <button class="action-button more">
                <svg viewBox="0 0 24 24" width="16" height="16">
                  <path fill="currentColor"
                    d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" />
                </svg>
              </button>
            </div>
          </div>

          <div class="pagination" v-if="filteredArticles.length > 0">
            <button class="page-button" :disabled="currentPage === 1" @click="changePage(currentPage - 1)">
              上一页
            </button>
            <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
            <button class="page-button" :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)">
              下一页
            </button>
          </div>

          <div class="empty-state" v-if="filteredArticles.length === 0">
            <svg viewBox="0 0 24 24" width="48" height="48">
              <path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
            </svg>
            <p>没有找到符合条件的文章</p>
            <button class="new-article-button" @click="openCreateModal">
              创建新文章
            </button>
          </div>
        </div>
      </div>

      <!-- 创建/编辑文章模态框 -->
      <div class="modal-overlay" v-if="showModal" @click.self="closeModal">
        <div class="modal">
          <div class="modal-header">
            <h2>{{ isEditing ? '编辑文章' : '新建文章' }}</h2>
            <button class="close-button" @click="closeModal">
              <svg viewBox="0 0 24 24" width="20" height="20">
                <path fill="currentColor"
                  d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
              </svg>
            </button>
          </div>

          <div class="modal-body">
            <div class="form-group">
              <label>标题</label>
              <input type="text" v-model="currentArticle.title" placeholder="输入文章标题">
            </div>

            <div class="form-group">
              <label>分类</label>
              <select v-model="currentArticle.category">
                <option v-for="category in categories" :value="category.id" :key="category.id">
                  {{ category.name }}
                </option>
              </select>
            </div>

            <div class="form-group">
              <label>状态</label>
              <div class="status-options">
                <label>
                  <input type="radio" v-model="currentArticle.status" value="draft">
                  <span>草稿</span>
                </label>
                <label>
                  <input type="radio" v-model="currentArticle.status" value="published">
                  <span>已发布</span>
                </label>
                <label>
                  <input type="radio" v-model="currentArticle.status" value="archived">
                  <span>已归档</span>
                </label>
              </div>
            </div>

            <div class="form-group">
              <label>内容</label>
              <textarea v-model="currentArticle.content" placeholder="输入文章内容..."></textarea>
            </div>
            <div class="editPaper" @click="openMarkdownEditor()">进入Markdown编辑文章</div>
          </div>

          <div class="modal-footer">
            <button class="cancel-button" @click="closeModal">取消</button>
            <button class="save-button" @click="saveArticle">
              {{ isEditing ? '更新' : '保存' }}
            </button>
          </div>
        </div>
      </div>

      <!-- 删除确认对话框 -->
      <div class="dialog-overlay" v-if="showDeleteDialog">
        <div class="dialog">
          <div class="dialog-header">
            <h3>确认删除</h3>
          </div>
          <div class="dialog-body">
            <p>确定要删除文章 "{{ articleToDelete?.title }}" 吗？此操作不可恢复。</p>
          </div>
          <div class="dialog-footer">
            <button class="cancel-button" @click="showDeleteDialog = false">取消</button>
            <button class="confirm-button" @click="deleteArticle">确认删除</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <MarkdownEditor :modelValue="markdownText" @save="handleSaveMarkdown" v-if="showMarkdownEditor" />
</template>

<script setup>
import { ref, computed, onMounted, inject } from 'vue';
import MarkdownEditor from '../components/MarkdownEditor.vue';
// 获取本地存储的用户ID
const userId = localStorage.getItem("userId");
import { getUserArticleArrApi, deleteArticleApi, updateArticleApi } from '../api/GetForum.js';


const showMarkdownEditor = ref(false)
const openMarkdownEditor = () => {
  showMarkdownEditor.value = true
}
// 接收保存后的 markdown 内容
const markdownText = ref('')

// 点击“保存”后接收子组件传来的数据
const handleSaveMarkdown = ({ content, childTransformShow }) => {
  markdownText.value = content
  showMarkdownEditor.value = childTransformShow
  currentArticle.value.content = markdownText.value
  // console.log('markdownText.valuevewvwevwevew', markdownText.value, 'markdownText.value');
  // 你也可以在这里发送到后端，例如 axios.post('/api/save', { content })
}
// 主题功能
const theme = inject("theme", ref('light'));
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
};

// 文章数据
const articles = ref([
  {
    id: 1,
    title: 'Vue3 组合式API入门指南',
    category: 1,
    status: 'published',
    content: '本文介绍Vue3组合式API的基本用法...',
    views: 1024,
    publishDate: '2023-05-15'
  },
  {
    id: 2,
    title: 'TypeScript与Vue3的最佳实践',
    category: 1,
    status: 'published',
    content: '如何在Vue3项目中有效使用TypeScript...',
    views: 856,
    publishDate: '2023-06-20'
  },
  {
    id: 3,
    title: '前端性能优化策略',
    category: 2,
    status: 'draft',
    content: '现代前端性能优化的多种方法...',
    views: 0,
    publishDate: ''
  },
  {
    id: 4,
    title: 'CSS Grid布局完全指南',
    category: 3,
    status: 'published',
    content: 'CSS Grid布局的详细使用方法...',
    views: 723,
    publishDate: '2023-04-10'
  },
  {
    id: 5,
    title: '响应式设计原理与实践',
    category: 2,
    status: 'archived',
    content: '响应式设计的核心原理和实现方法...',
    views: 542,
    publishDate: '2023-03-05'
  },
  {
    id: 5,
    title: '响应式设计原理与实践',
    category: 2,
    status: 'archived',
    content: '响应式设计的核心原理和实现方法...',
    views: 542,
    publishDate: '2023-03-05'
  },
  {
    id: 5,
    title: '响应式设计原理与实践',
    category: 2,
    status: 'archived',
    content: '响应式设计的核心原理和实现方法...',
    views: 542,
    publishDate: '2023-03-05'
  },
  {
    id: 5,
    title: '响应式设计原理与实践',
    category: 2,
    status: 'archived',
    content: '响应式设计的核心原理和实现方法...',
    views: 542,
    publishDate: '2023-03-05'
  }
]);

// 分类数据
const categories = ref([
  { id: 1, name: 'cet4', color: '#42b983' },   // 绿色
  { id: 2, name: 'cet6', color: '#647eff' },   // 蓝紫色
  { id: 3, name: 'ielts', color: '#ff6b6b' },  // 柔红色
  { id: 4, name: 'toefl', color: '#ffa502' },  // 活力橙
  { id: 5, name: 'gre', color: '#1abc9c' },    // 青绿色
  { id: 6, name: 'business', color: '#9b59b6' } // 紫色
]);


// 搜索和筛选
const searchQuery = ref('');
const filterStatus = ref('all');
const filterCategory = ref('all');
const currentPage = ref(1);
const itemsPerPage = 5;

// 模态框状态
const showModal = ref(false);
const isEditing = ref(false);
const currentArticle = ref({
  id: null,
  title: '',
  category: '',
  status: 'draft',
  content: '',
  views: 0,
  publishDate: ''
});

// 删除对话框状态
const showDeleteDialog = ref(false);
const articleToDelete = ref(null);

// 计算属性
const filteredArticles = computed(() => {
  let result = articles.value;

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    // console.log(query);
    result = result.filter(article =>
      article.title.toLowerCase().includes(query) ||
      article.content.toLowerCase().includes(query)
    );
  }

  // 状态过滤
  if (filterStatus.value !== 'all') {
    result = result.filter(article => article.status === filterStatus.value);
  }

  // 分类过滤
  if (filterCategory.value !== 'all') {
    result = result.filter(article => article.category === filterCategory.value);
  }

  // 分页
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return result.slice(start, end);
});

const totalPages = computed(() => {
  return Math.ceil(articles.value.length / itemsPerPage);
});

// 方法
const searchArticles = () => {
  currentPage.value = 1;
};

const filterArticles = () => {
  currentPage.value = 1;
};

const changePage = (page) => {
  currentPage.value = page;
};

const openCreateModal = () => {
  currentArticle.value = {
    id: null,
    title: '',
    category: categories.value[0].id,
    status: 'draft',
    content: '',
    views: 0,
    publishDate: ''
  };
  isEditing.value = false;
  showModal.value = true;
};

const openEditModal = (article) => {
  currentArticle.value = { ...article };
  // console.log(currentArticle.value);
  markdownText.value = currentArticle.value.content
  isEditing.value = true;
  showModal.value = true;
};

const closeModal = () => {
  showModal.value = false;

};

const saveArticle = () => {
  if (!currentArticle.value.title.trim()) {
    alert('请输入文章标题');
    return;
  }

  if (isEditing.value) {
    // 更新文章
    const index = articles.value.findIndex(a => a.id === currentArticle.value.id);
    if (index !== -1) {
      articles.value[index] = { ...currentArticle.value };
      // console.log(currentArticle.value);
      updateArticleFlag(userId, currentArticle.value)
    }
  } else {
    // 新增文章
    const newId = Math.max(...articles.value.map(a => a.id)) + 1;
    const newArticle = {
      ...currentArticle.value,
      id: newId,
      publishDate: currentArticle.value.status === 'published' ? new Date().toISOString().split('T')[0] : ''
    };
    articles.value.unshift(newArticle);
  }

  closeModal();
};
const updateArticleFlag = async (userId, articleData) => {
  const reversedCategoryMap = {
    0: 'all',
    1: 'cet4',
    2: 'cet6',
    3: 'ielts',
    4: 'toefl',
    5: 'gre',
    6: 'business'
  };
  // console.log(userId, articleData);
  const afterArticleData = {
    title: articleData.title,
    content: articleData.content,
    category: reversedCategoryMap[articleData.category],
    excerpt: articleData.excerpt,
    word: articleData.word,
    votes: articleData.votes,
    comments: articleData.comments,
    date: articleData.publishDate,
  }
  console.log(afterArticleData);
  updateArticleApi(userId, articleData.id, afterArticleData);
}

const confirmDelete = (article) => {
  articleToDelete.value = article;
  showDeleteDialog.value = true;
};

const deleteArticle = () => {
  articles.value = articles.value.filter(a => a.id !== articleToDelete.value.id);
  showDeleteDialog.value = false;
  deleteArticleFlag(userId, articleToDelete.value.id);
  // console.log(articleToDelete.value.id);
};
const deleteArticleFlag = async (userId, articleId) => {
  try {
    const res = await deleteArticleApi(userId, articleId);

    if (res.success) {
      console.log('文章删除成功');
      // 可选：更新前端数据、弹窗提示等
    } else {
      console.warn('删除失败:', res.message);
    }
  } catch (error) {
    console.error('请求出错:', error.message || error);
  }
};

const getCategoryName = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId);
  return category ? category.name : '未分类';
};

const getCategoryColor = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId);
  return category ? category.color : '#999';
};

const getStatusText = (status) => {
  const statusMap = {
    draft: '草稿',
    published: '已发布',
    archived: '已归档'
  };
  return statusMap[status] || status;
};

const formatDate = (dateString) => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleDateString();
};


const loadGetUserArticleArr = async () => {
  try {
    const response = await getUserArticleArrApi(userId);
    if (response.success) {
      // console.log("用户文章列表:", response.articles);
      return response;
    }
  } catch (error) {
    console.error("加载用户文章列表失败:", error);
  }
};
const loadPageData = async () => {
  try {
    const [articleArr] = await Promise.all([
      loadGetUserArticleArr()
    ])

    if (articleArr.success) {

      // console.log("文章列表:", articleArr.articles);
      handUserArticleArr(articleArr.articles)
    } else {
      if (!articleArr.success) ElMessage.error(articleArr.message)
    }
  } catch (error) {
    console.error(error)
    ElMessage.error('请求数据失败')
  }
}
const handUserArticleArr = (GetArticleArr) => {
  const categoryMap = {
    cet4: 1,
    cet6: 2,
    ielts: 3,
    toefl: 4,
    gre: 5,
    business: 6,
  };

  const beforeArticleArr = GetArticleArr.map((item) => ({
    id: item.id,
    title: item.title,
    category: categoryMap[item.category] || 0, // 如果不存在则为 0（可自定义）
    status: 'published',
    content: item.content,
    views: 1036,
    publishDate: item.date,
    comments: item.comments,
    excerpt: item.excerpt,
    word: item.word,
    votes: item.votes,
  }));
  articles.value = beforeArticleArr;
  console.log("beforeArticleArr:", beforeArticleArr);
}
onMounted(() => {
  // 可以在这里加载远程数据
  loadPageData()
});
</script>

<style scoped>
.article-manager {
  --bg-color: #f8f9fa;
  --text-color: #333;
  --primary-color: #4361ee;
  --secondary-color: #6c757d;
  --border-color: #e1e4e8;
  --card-bg: #fff;
  --hover-bg: #f1f3f5;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --danger-color: #dc3545;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --input-bg: #fff;
  --modal-bg: #fff;
  --modal-overlay: rgba(0, 0, 0, 0.5);
}

.article-manager.dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --primary-color: #4895ef;
  --secondary-color: #8e8e8e;
  --border-color: #333;
  --card-bg: #2d2d2d;
  --hover-bg: #383838;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --danger-color: #e63946;
  --success-color: #2a9d8f;
  --warning-color: #f4a261;
  --info-color: #457b9d;
  --input-bg: #383838;
  --modal-bg: #383838;
  --modal-overlay: rgba(0, 0, 0, 0.7);
}

.article-manager {
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 80vh;
  padding: 20px;
  transition: background-color 0.3s, color 0.3s;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.header h1 {
  margin: 0;
  font-size: 1.8rem;
  color: var(--text-color);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-color);
  padding: 8px;
  border-radius: 4px;
}

.theme-toggle:hover {
  background-color: var(--hover-bg);
}

.new-article-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.new-article-button:hover {
  opacity: 0.9;
}

.content-container {
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: var(--input-bg);
  border-radius: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  flex: 1;
  min-width: 250px;
}

.search-box svg {
  margin-right: 8px;
  color: var(--secondary-color);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-color);
}

.filters {
  display: flex;
  gap: 12px;
}

.filters select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--text-color);
  outline: none;
  cursor: pointer;
}

.article-list {
  display: flex;
  flex-direction: column;
}

.list-header {
  display: flex;
  padding: 12px 16px;
  background-color: var(--hover-bg);
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
}

.header-item {
  padding: 0 8px;
}

.article-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.article-item:hover {
  background-color: var(--hover-bg);
}

.item-cell {
  padding: 0 8px;
  display: flex;
  align-items: center;
}

.article-title {
  font-weight: 500;
}

.title-link {
  color: var(--primary-color);
  text-decoration: none;
}

.title-link:hover {
  text-decoration: underline;
}

.category-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge.draft {
  background-color: var(--warning-color);
  color: #333;
}

.status-badge.published {
  background-color: var(--success-color);
  color: white;
}

.status-badge.archived {
  background-color: var(--secondary-color);
  color: white;
}

.actions {
  display: flex;
  gap: 8px;
}

.action-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.2s;
  color: var(--text-color);
}

.action-button:hover {
  background-color: var(--hover-bg);
}

.action-button.edit:hover {
  color: var(--primary-color);
}

.action-button.delete:hover {
  color: var(--danger-color);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 16px;
}

.page-button {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  color: var(--text-color);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.page-button:hover:not(:disabled) {
  background-color: var(--hover-bg);
}

.page-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 0.9rem;
  color: var(--secondary-color);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--secondary-color);
}

.empty-state svg {
  margin-bottom: 16px;
  color: var(--secondary-color);
}

.empty-state p {
  margin: 0 0 20px;
  font-size: 1.1rem;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--modal-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: var(--modal-bg);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.close-button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--secondary-color);
  padding: 4px;
  border-radius: 4px;
}

.close-button:hover {
  background-color: var(--hover-bg);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--text-color);
  outline: none;
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
  width: 95%;
}

.status-options {
  display: flex;
  gap: 16px;
}

.status-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-button {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  background-color: transparent;
  color: var(--text-color);
  border-radius: 4px;
  cursor: pointer;
}

.cancel-button:hover {
  background-color: var(--hover-bg);
}

.save-button {
  padding: 8px 16px;
  border: none;
  background-color: var(--primary-color);
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.save-button:hover {
  opacity: 0.9;
}

/* 删除对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--modal-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background-color: var(--modal-bg);
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  box-shadow: var(--shadow);
}

.dialog-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.dialog-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.dialog-body {
  padding: 20px;
}

.dialog-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.confirm-button {
  padding: 8px 16px;
  border: none;
  background-color: var(--danger-color);
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-button:hover {
  opacity: 0.9;
}

/* 头部样式 */
.forum-header {
  background-color: var(--card-bg);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-color);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.word-icon {
  font-size: 1.8rem;
}

.logo h1 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--primary-color);
}

.main-nav {
  display: flex;
  gap: 1.5rem;
}

.main-nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
}

.main-nav a:hover {
  color: var(--primary-color);
}

.main-nav a.router-link-active {
  color: var(--primary-color);
}

.main-nav a.router-link-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
}

.user-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-color);
  padding: 0.5rem;
}

.editPaper {
  width: 100%;
  /* background-color: #853f3f; */
  margin: 0 auto;
  border: 3px dashed var(--border-color);
  color: var(--secondary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 10px;
}

.editPaper:hover {
  border: 3px dashed var(--primary-color);
  cursor: pointer;
}
</style>